import React, { useCallback } from "react";
import { useNavigate, Link } from "react-router-dom";

import { Button, Form, Input, message } from "antd";
import "./login.css";

import { login } from "../../api/login";

interface LoginUser {
    username: string;
    password: string;
}

const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
}
const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

const onFinish1 = (values: LoginUser) => {
    const { username, password } = values;
    login(username, password).then(res=>{
        const { code, userInfo, accessToken, refreshToken } = res.data;
        // 由于该方法中要使用 react-router-dom提供的导航 hooks，所以需要把该方法维护到函数式组件内部了
        // 因为hooks是React专门为函数式组件提供的
        message.success("登录成功，即将跳转到首页");
        localStorage.setItem("access_token", accessToken);
        localStorage.setItem("refresh_token", refreshToken);
        localStorage.setItem("user_info", JSON.stringify(userInfo));
    },err=>{
        message.error(err.data);
    })
}

export const Login: React.FC = () => {
    const navigate = useNavigate();

    // 我们使用useCallback来避免该方法不必要的刷新
    const onFinish = useCallback((values: LoginUser)=>{
        const { username, password } = values;
        login(username, password).then(res=>{
            const { code, userInfo, accessToken, refreshToken } = res.data;
            
            message.success("登录成功，即将跳转到首页");
            setTimeout(()=>{
                navigate("/")
            }, 1500)
            localStorage.setItem("access_token", accessToken);
            localStorage.setItem("refresh_token", refreshToken);
            localStorage.setItem("user_info", JSON.stringify(userInfo));
        },err=>{
            message.error(err.data);
        })
    }, [])

    return (
        <div className="login">
            <h1>会议室预定系统</h1>
            <Form
                {...layout1}
                colon={false}
                autoComplete="off"
                onFinish={onFinish}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{required: true, message: "请输入用户名！"}]}
                >
                    <Input></Input>
                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{required: true, message: "请输入密码！"}]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item {...layout2}>
                    <div className="login__links">
                        <Link to="/register">创建账号</Link>
                        <Link to="/update_password">忘记密码</Link>
                    </div>
                </Form.Item>
                <Form.Item {...layout2}>
                    <Button className="login__btn" type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )

}